<template>
<div class="pagebox">
  <span @click="batchDelete">批量删除</span>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      background
      layout="prev, pager, next, jumper"
      :total="total">
  </el-pagination>
</div>
  
</template>

<script>
import Bus from '../../../utils/bus'
export default {
  props:['total','pageSize'],
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);  //父组件的pagesize
        this.$parent.pageSize = val
        this.$parent.getData()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);   //父组件page
        this.$parent.page = val
        this.$parent.getData()
      },
      batchDelete(){       //批量删除bus通信往兄弟组件传
        Bus.$emit('batchdelete')
      }
    },
    data() {
      return {
        currentPage:1 
      };
    }
}
</script>

<style lang="less" scoped>
.pagebox{
  width: 1220px;
  background-color: white;
  margin: 0 auto;
  padding-top: 22px;
  padding-bottom: 24px;
  span{
    margin-left: 150px;
    display: block;
    cursor: pointer;
  }
  /deep/.el-pagination{
    text-align: center;
    
  }
}
</style>